<template>
	<el-dialog title="修改角色信息" :visible.sync="dialogVisible" width="40%">
		<el-form ref="form" label-width="80px" :model="form">
			<el-form-item label="角色">
				<el-input placeholder="" v-model="form.name"></el-input>
			</el-form-item>
			<el-form-item label="功能">
				<el-input placeholder="请描述此角色具备的相关功能" v-model="form.info"></el-input>

			</el-form-item>
			
			<el-form-item label="管理">
				<el-col :span="20">
					
					<el-checkbox-group v-model="form.menuList">
						<el-checkbox v-for="menu in menuList" :label="menu.id" :key="menu.id" >
							{{menu.name}}
						</el-checkbox>
					</el-checkbox-group>
				</el-col>

			</el-form-item>

		</el-form>
		<span slot="footer" class="dialog-footer">
			<el-button @click="dialogVisible = false">取 消</el-button>
			<el-button type="primary" @click="save()">保存</el-button>
		</span>
	</el-dialog>
</template>

<script>
	export default {
		name: "Add",
		data() {
			return {
				dialogVisible: false,
				menuList: [],
				form: {
					id:'',
					name:'',
					info:'',
					menus:[],
					menuList:[]
				},
				flag:true
			}
		},
		methods: {
			findRoleById(id){
				this.$http.get("admin/RoleCtl/findRoleById?id="+id).then((resp) => {
					this.form=resp.data.data;
				})
			},
			save() {
				this.$http.post("admin/RoleCtl/saveRole", this.form).then((resp) => {
					if (resp.data.code == 200) {
						this.$message({
							showClose: true,
							message: '恭喜你，修改成功✔',
							type: 'success'
						});
						this.$router.go();
					}
				})
			}
		},
		mounted() {
			this.$http.get("admin/RoleCtl/findMenus").then((res) => {
				if (res.data.code == 200) {
					this.menuList = res.data.data;
				}
			})
		}
	}
</script>